<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			window.onload = function(){
				function $(bcg){
					var taget = document.getElementById(bcg);
					var spans=taget.getElementsByTagName("span");
					var lis=taget.getElementsByTagName("li");
				
					for(var i=0;i<spans.length;i++){
						spans[i].index=i;
						spans[i].onmouseover=function(){
							for(var j=0;j<spans.length;j++){
								spans[j].className="";
								lis[j].className="";
							}
							this.className="current";
							lis[this.index].className="show";
						}
					}
			}
				$("box1");
				
		}
				
		</script>

	</head>
<body>
		<!--<div class="header">
				<div class="top">
					<div class="left">
					<img src="img/logo.png"/>
					</div>
					
					<div class="right">
						<div class="zuo">
						<img class="pic1" src="img/hx.png"/>
						<span class="beishu">北树二期</span>
						</div>
						<div class="you">
						<img class="pic2" src="img/矢量智能对象 拷贝 3.png"/>
						<span class="zhangsan">张三</span>
						<img class="pic3" src="img/2879a096c0c4bfbee994dc7d5b537e4.png"/>
						</div>
						
					</div>
				
				</div>
			
			
		</div>-->
		<div class="content">
		<!--<div class="list"></div>-->
		
			<div class="contain">
				<div class="gonggao">
					<p><img src="img/notice.png"/>公告【平台公告】2016-2020年建筑业信息化纲领</p>
				</div>
			<div class="main">
				<div class="main1 whitebg">
					<p class="1p">北树二期棚改项目信息</p>
						<div class="main2" >
							<p>距离项目结束还有<a href="#">400</a>天</p>
								<div class="time">
									<p>施工开始时间</p>
									<p>施工结束时间</p>
									<p>建设单位...</p>
									<p>施工单位...</p>
									<p>监理单位...</p>
									<p><a href="#">查看更多项目信息>></a></p>
								</div>
								<div class="place">
									<p>视频监控</p>
									<div class="p1 box">监控位置1</div>
									<div class="p2 box">监控位置2</div>
									<div class="p3 box">监控位置3</div>
								</div>
							
						</div>
					
					
				</div>
				
				<div class="main3 whitebg">
					<h4><img src="img/facility.png"/>人员信息</h4>
					<div class="left1">
						<div class="zaichang">
							<p>在场人员统计</p>
								<div class="tool1">
								<img src="img/1.png" alt="" />
								</div>
								<div class="sum1">
								<p><strong>888</strong></p>
								<p class="sum">劳务工人数量</p>
								</div>
								<div class="num1">
									<p><strong>698</strong></p>
									<p class="num">项目人员数量</p>
								</div>
						</div><br />
						<div class="zhuce">
							<p>注册人员统计</p>
							<div class="tool3">
								<img src="img/3.png" alt="" />
								</div>
								<div class="sum3">
								<p><strong>888</strong></p>
								<p class="summm">劳务工人数量</p>
								</div>
								<div class="num3">
									<p><strong>698</strong></p>
									<p class="nummm">项目人员数量</p>
								</div>
						</div>
					</div>
					<div class="right1">
						<div class="yichang">
							<p>异常人员统计</p>
								<div class="tool2">
								<img src="img/2.png" alt="" />
								</div>
								<div class="sum2">
									<p><strong>888</strong></p>
									<p class="summ">劳务工人数量</p>
								</div>
								<div class="num2">
									<p><strong>698</strong></p>
									<p class="numm">项目人员数量</p>
								</div>
						</div>
						
						<div class="banzu">
							<p>班组人员统计</p>
							<div class="tool4">
								<img src="img/4.png" alt="" />
								</div>
								<div class="sum4">
								<p><strong>888</strong></p>
								<p class="summmm">特殊工种</p>
								</div>
								<div class="num4">
									<p><strong>698</strong></p>
									<p class="nummmm">班组</p>
								</div>
						</div>
					</div>
				</div>
			</div>

				<div class="product whitebg">
					<h4><img src="img/facility.png"/>设备信息</h4>
					
					<div class="box1" id="box1">
			<div class="top3">
				<span class="current">塔吊监控设备</span>
				<span>升降机监控设备</span>
				<span>考勤设备</span>
			</div>
			<div class="bottom ">
				<ul>
					<li class="show">
						<div class="row1">塔吊监控设备</div>
						<div class="row2"></div>
						<div class="row3">
							<div class="rows1">
								<i>塔吊监控<a href="#">3</a>台</i><i>在线<a href="#">3</a>台</i><i>脱机<a href="#">0</a>台</i>
							</div>
							<div class="rows2">
								<i>吊钩可视化<a href="">3</a>台</i><i>在线<a href="">3</a>台</i><i>脱机<a href="">0</a>台</i>
							</div>
							<div class="rows3">
								<i>塔吊位置<a href="#">3</a>台</i><i>是否工作<a href="#">3</a>台</i><i>是否超载<a href="#">0</a>台</i>
							</div>
							<div class="rows4">
								<i>一号楼</i><i>是</i><i>否</i>
							</div>
							<div class="rows4">
								<i>二号楼</i><i>是</i><i>否</i>
							</div>
						<div class="row4">查看更多<br />塔吊监控信息</div>
						
					</li>
					<li>
						<div class="li1">升降机监控设备</div>
						<div class="row2"></div>
						<div class="li2">
							<div class="rows1">
								<i>设备<a href="#">3</a>台</i><i>在线<a href="#">3</a>台</i><i>脱机<a href="#">0</a>台</i>
							</div>
							
							<div class="rows2">
								<i>升降机位置<a href="#">3</a>台</i><i>是否工作<a href="#">3</a>台</i><i>是否超载<a href="#">0</a>台</i>
							</div>
							<div class="rows3">
								<i>一号楼</i><i>是</i><i>否</i>
							</div>
							<div class="rows4">
								<i>二号楼</i><i>是</i><i>否</i>
							</div>
						</div>	
					</li>
					<li>
						<div class="lis1">考勤设备</div>
						<div class="row2"></div>
						<div class="lis2">
						
							<div class="rows1">
								<i>人脸设备<a href="#">3</a>台</i><i>是否工作<a href="#">3</a>台</i><i>是否超载<a href="#">0</a>台</i>
							</div>
							
							<div class="rows2">
								<i>刷卡设备</i><i>是</i><i>否</i>
							</div>
						</div>	
					</li>
					
				</ul>
			</div>
		</div>
				</div>
				
				<div class="huanjing whitebg ">
				<h4><img src="img/facility.png"/>环境监测信息</h4>	
					<div class="tianqi">
						<img src="img/天气.png" alt="" />
						<div class="riqi">
							<a><strong>15～26℃</strong></a>
							<p class="ok1">2017-06-13</p>
							<p class="ok2">明天：多云转雷阵雨 14-20℃</p>
						</div>
						
					</div>
					<div class="down">
						<div class="message1">
							<span><img src="img/2.5.png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>PM2.5</p>
						</div>
						<div class="message2">
							<span><img src="img/10 (1).png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>PM10</p>
						</div>
						<div class="message3">
							<span><img src="img/风速.png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>风速</p>
						</div>
						<div class="message4">
							<span><img src="img/温度.png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>温度</p>
						</div>
						<div class="message5">
							<span><img src="img/湿度.png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>湿度</p>
						</div>
						<div class="message6">
							<span><img src="img/噪音.png"/></span><span class="span2"><a href="">10</a>pg/m3</span>
							<p>噪音</p>
						</div>
					</div>
				</div>
				
		</div>
	</div>
				
			</div>
			
			<div class="clear"></div>
	</body>
</html>
